<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

<style type="text/css">
.tablebox{border:solid 1px #ddd;}
.tablebox td{text-align:center;border:solid 1px #ddd;padding:5px;}
</style>

<div style="width:530px;margin:0 auto;">
	<table class="tablebox" width="500" border="0" cellpadding="0" cellspacing="0">
		<tbody id="table2">
			<tr>
				<td>1</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>2</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>3</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>4</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>5</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>6</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>7</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>8</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>9</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>10</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>11</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</tbody>
	</table>
	
	<div style="height:30px;margin:20px 0 0 0;">
		<span id="spanFirst">第一页</span>
		<span id="spanPre">上一页</span>
		<span id="spanNext">下一页</span>
		<span id="spanLast">最后一页</span>
		第
		<span id="spanPageNum"></span>
		页/共
		<span id="spanTotalPage"></span>
		页
	</div>

</div>


<script type="text/javascript">
var theTable = document.getElementById("table2");
var totalPage = document.getElementById("spanTotalPage");
var pageNum = document.getElementById("spanPageNum");

var spanPre = document.getElementById("spanPre");
var spanNext = document.getElementById("spanNext");
var spanFirst = document.getElementById("spanFirst");
var spanLast = document.getElementById("spanLast");

var numberRowsInTable = theTable.rows.length;
var pageSize = 6;
var page = 1;

//下一页
function next() {

	hideTable();
	
	currentRow = pageSize * page;
	maxRow = currentRow + pageSize;
	if ( maxRow > numberRowsInTable )
	maxRow = numberRowsInTable;
	for ( var i = currentRow; i< maxRow; i++ ) {
		theTable.rows[i].style.display = '';
	}
		page++;
	if ( maxRow == numberRowsInTable ){
		nextText();
		lastText();
	}
	showPage();
	preLink();
	firstLink();
}

//上一页
function pre() {

	hideTable();
	
	page--;

	currentRow = pageSize * page;
	maxRow = currentRow - pageSize;
	if ( currentRow > numberRowsInTable )
	currentRow = numberRowsInTable;
	for ( var i = maxRow; i< currentRow; i++ ) {
		theTable.rows[i].style.display = '';
	}


	if ( maxRow == 0 ) {
		preText();
		firstText();
	}
	
	showPage();
	nextLink();
	lastLink();
}

//第一页
function first() {
	hideTable();
	page = 1;
	for ( var i = 0; i<pageSize; i++ ) {
		theTable.rows[i].style.display = '';
	}
	showPage();

	preText();
	nextLink();
	lastLink();
}

//最后一页
function last() {
	hideTable();
	page = pageCount();
	currentRow = pageSize * (page - 1);
	for ( var i = currentRow; i<numberRowsInTable; i++ ) {
		theTable.rows[i].style.display = '';
	}
	showPage();
	
	preLink();
	nextText();
	firstLink();
}

function hideTable() {
	for ( var i = 0; i<numberRowsInTable; i++ ) {
	theTable.rows[i].style.display = 'none';
	}
}

function showPage() {
	pageNum.innerHTML = page;
}

//总共页数
function pageCount() {
	var count = 0;
	if ( numberRowsInTable%pageSize != 0 ) count = 1; 
	return parseInt(numberRowsInTable/pageSize) + count;
}

//显示链接
function preLink() { spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>"; }
function preText() { spanPre.innerHTML = "上一页"; }

function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>"; }
function nextText() { spanNext.innerHTML = "下一页"; }

function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>"; }
function firstText() { spanFirst.innerHTML = "第一页"; }

function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>"; }
function lastText() { spanLast.innerHTML = "最后一页"; }

//隐藏表格
function hide() {
	for ( var i = pageSize; i<numberRowsInTable; i++ ) {
		theTable.rows[i].style.display = 'none';
	}

	totalPage.innerHTML = pageCount();
	pageNum.innerHTML = '1';
	
	nextLink();
	lastLink();
}

hide();
</script>

</body>
</html>